import React, { FC, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import MyHead from '../../components/MyHead'
import { Button, SearchBar, Space, Toast ,Empty} from 'antd-mobile'
import { getGoodListAsync } from '../../redux/actions'
import GList from './GList'
import { Router } from 'react-router-dom'
import { QuestionCircleOutline } from 'antd-mobile-icons'

const Seacrch :FC<any>= ({
  //下面解构后，这里也需要
  goodList,
  dispatch
}) => {
  // 获取数据
useEffect(()=>{
  dispatch(getGoodListAsync())  //页面调取商品信息   （控制台已经拿到数据 在redux中已经存了 这里通过dispatch 来调用）
},[])

  // 返回一个list 以及更新list 的函数 在初始渲染期间 返回的状态（list）与传入的第一个参数[数组]值相同，setList 函数用于更行list。它接收一个新的list值并将组件的一个重新渲染加入队列
  let [list,setList] = useState<any>([]) 
  let [flag,setFlag] = useState<any>(false)

    // 取消搜索
    const onCancel=()=>{
      // 取消，清零
      setList([...list])
      setFlag(false)
     
      
    }

  // 回车触发

  const onSearch=(value:any)=>{
    setFlag(true)
    console.log(value);  //输入的搜索的值
    list = goodList.filter((item:any)=>(item.name.indexOf(value)!=-1||item.type.text.indexOf(value)!=-1))  //filter过滤信息   indexOf() 返回某个指定的字符在某个字符串中首次出现的位置。如果没有找到就返回-1；
    console.log(list);
    setList([...list])
  }


  return (

    <div>
        <MyHead title='搜索' back={true} />
        <div className='sbox' style={{padding:30}}>
        <SearchBar placeholder='请输入关键字搜索' showCancelButton 
        onSearch={onSearch} 
        onCancel={onCancel}/>
        </div>
      {
        flag && <div>
           {
        list.length >0 ?<GList list={list} />
        : <Empty
        style={{ padding: '64px 0' }} 
          image={
            <QuestionCircleOutline
              style={{
                color: 'var(--adm-color-light)',
                fontSize: 48,
              }}
            />
          }
         description='暂无商品信息' />
      }
        </div>
      }
    </div>
  )
}

export default connect(
  // 拿数据
(state:any)=>{
console.log(state);
return{
   // 得到数据后 解构  这里解构后，上面也需要
   goodList:state.getIn(['data','goodList'])  //商品数据
}

}
) (Seacrch)